<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>关联权限</title>
    <link rel="stylesheet" type="text/css" href="/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/css/admin.css"/>
    <style>
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(-50%)}
    </style>
</head>

<body>
<form class="layui-form" lay-filter="selectRole" action="">
<div class="layui-form-item" pane="">
    <label class="layui-form-label">权限选择</label>
    <div class="layui-input-block" id = "privilegeBox" >
    </div>
</div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="relationPrivilege">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form'], function() {
        var form = layui.form;
        form.render();
        $ = layui.jquery;
        var rolePrivileges = [];
        $.ajax({
            type: "post",
            async:false,
            data: {"roleId": parent.roleId},
            url: "http://localhost:8080/privilege/getPrivilegesByRoleId",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("系统异常，请联系管理员!");
            },
            success: function (data) {
                rolePrivileges = data.data.rolePrivilegeList;
            }
        });
        for(var i=0;i<parent.privilegeList.length;i++){
            var privilege = parent.privilegeList[i];
            var str = "<input type=\"checkbox\" name=\"privilege\" value=\""
                +privilege.privilegeId+ "\"lay-skin=\"primary\" title=\"" +privilege.privilegeName+"\"";
            for(var j=0;j<rolePrivileges.length;j++){
                if(parent.privilegeList[i].privilegeId == rolePrivileges[j].privilegeId){
                    str = str + "checked=\"\"";
                }
            }
            str = str+"\">";
            $("#privilegeBox").append(str);
        }


        //监听提交
        form.on('submit(relationPrivilege)', function(data) {
            var obj = document.getElementsByName("privilege");//选择所有name="interest"的对象，返回数组
            var s='';//如果这样定义var s;变量s中会默认被赋个null值
            for(var i=0;i<obj.length;i++){
                if(obj[i].checked) //取到对象数组后，我们来循环检测它是不是被选中
                    s+=obj[i].value+',';   //如果选中，将value添加到变量s中
            };
            if(s == ''){
                alert("请先选择权限");
                return;
            }
            $.ajax({
                type: "post",
                data: {"roleId":parent.roleId,"privilegeIds":s},
                async:false,
                url: "http://localhost:8080/privilege/relationPrivilege",
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("系统异常，请联系管理员!");
                },
                success: function (data) {
                    alert(data.message);
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index);
                }

            });
        });
    });
</script>

</body>

</html>